<template>
  <div class="app-container">
    <el-backtop visibility-height="10"></el-backtop>
    <!--工具栏 -->
    <el-row :gutter="25">
      <el-col :span="25" :xs="24">
        <el-form :model="conditions" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="用户账号" prop="username">
            <el-input v-model="conditions.username" placeholder="请输入用户账号" clearable/>
          </el-form-item>
          <el-form-item label="用户性别" prop="sex">
            <el-select v-model="conditions.sex" clearable placeholder="请选择">
              <el-option value="0" label="男"/>
              <el-option value="1" label="女"/>
            </el-select>
          </el-form-item>
          <el-form-item label="参加时间" prop="into_work_time">
            <el-date-picker
              v-model="conditions.into_work_time"
              type="daterange"
              format="yyyy-MM-DD" value-format="yyyy-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
              v-model="conditions.create_time"
              type="daterange"
              format="yyyy-MM-DD" value-format="yyyy-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!--工具栏2 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
<!--        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"-->
<!--                   @click="openEditPlatformResumeDialog"-->
<!--        >修改-->
<!--        </el-button>-->
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="single"
                   @click="handleDeleteUserResume"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-message" size="mini" :disabled="single"
                   @click="handlePlatformResumeDetails"
        >查看详情
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading"
                   @click="query"
        >搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" :loading="loading" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table
        v-loading="loading"
        :data="platforms"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="编号" type="index" align="center"></el-table-column>
        <el-table-column label="用户" prop="username" align="center"></el-table-column>
        <el-table-column label="联系号码" prop="phone" align="center" width="150"></el-table-column>
        <el-table-column label="联系邮箱" prop="email" align="center" width="200"></el-table-column>
        <el-table-column label="简历标题" prop="resume_title" align="center"></el-table-column>
        <el-table-column label="性别" prop="notice_type" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex === 0" type="success">{{ '男' }}</el-tag>
            <el-tag v-else-if="scope.row.sex === 1" type="warning">{{ '女' }}</el-tag>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          label="参加工作时间" align="center"
          width="150"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ msToDate(scope.row.into_work_time).withoutTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间" align="center"
          width="150"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ msToDate(scope.row.create_time).withoutTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-reading"
                       @click="handlePlatformResumeDetails(scope.row.id)"
            >详情
            </el-button>
<!--            <el-button size="mini" type="text" icon="el-icon-edit"-->
<!--                       @click="openEditPlatformResumeDialog(scope.row.id)"-->
<!--            >修改-->
<!--            </el-button>-->
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="handleDeleteUserResume(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="conditions.currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="conditions.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="platforms_total"
      >
      </el-pagination>
    </el-row>

    <el-dialog
      title="简历预览"
      :visible.sync="previewDialogVisible"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handlePreviewDialogClose"
    >
      <div v-loading="previewDialogLoading">
        <el-card shadow="hover" class="preview-card">
          <div slot="header">简历信息</div>
          <el-form :model="preview" label-width="68" label-position="top">
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="preview.name" readonly/>
                </el-form-item>
                <el-form-item label="期望职位" prop="expect_career">
                  <el-input v-model="preview.expect_career" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="简历头像" prop="resume_avatar">
                  <el-avatar shape="square" :size="141" :fit="cover" :src="preview.resume_avatar"></el-avatar>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="性别" prop="sex">
                  <el-input :value="preview.sex === 0 ? '男' : '女'" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="参加工作时间" prop="into_work_time">
                  <el-input :value="msToDate(preview.into_work_time).withoutTime" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="生日" prop="birthday">
                  <el-input :value="msToDate(preview.birthday).withoutTime" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="preview.email" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="preview.phone" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="微信号" prop="wechat_id">
                  <el-input v-model="preview.wechat_id" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="期望城市" prop="expect_city">
                  <el-input v-model="preview.expect_city" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="期望薪资">
                  <el-row type="flex" :gutter="10">
                    <el-col>
                      <el-input v-model="preview.expect_salary_down" readonly/>
                    </el-col>
                    -
                    <el-col>
                      <el-input v-model="preview.expect_salary_up" readonly/>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="20">
              <el-col>
                <el-form-item label="籍贯" prop="origin_city">
                  <el-input v-model="preview.origin_city" readonly/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="政治面貌" prop="politics_status">
                  <el-input :value="preview.sex === 0 ? '共产党员' : '非党员'" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-form-item label="教育经历">
                <el-card shadow="never" style="margin-top: 10px" v-if="preview.eduExperiences.length !== 0"
                         v-for="edu in preview.eduExperiences"
                >
                  <el-row class="title" type="flex">
                    {{ edu.school_name }}
                  </el-row>
                  <el-row class="info">
                    {{ edu.education }}
                    <el-divider direction="vertical"></el-divider>
                    {{ edu.specialty }}
                    <el-divider direction="vertical"></el-divider>
                    {{ new Date(edu.start_time).getFullYear() }} - {{ new Date(edu.end_time).getFullYear() }}
                  </el-row>
                </el-card>
              </el-form-item>
            </el-row>

            <!-- 实习经历 -->
            <el-row style="margin-top: 10px">
              <el-form-item label="实习经历">
                <el-card shadow="never" style="margin-top: 10px" v-if="preview.praExperiences.length !== 0"
                         v-for="pra in preview.praExperiences"
                >
                  <el-row class="title" type="flex">
                    {{ pra.company_name }}
                  </el-row>
                  <el-row class="info">
                    {{ pra.career_name }}
                    <el-divider direction="vertical"></el-divider>
                    {{ msToDate(pra.start_time).withoutTime }} - {{ msToDate(pra.end_time).withoutTime }}
                  </el-row>
                </el-card>
              </el-form-item>
            </el-row>

            <!-- 项目经历 -->
            <el-row style="margin-top: 10px">
              <el-form-item label="项目经历">
                <el-card shadow="never" style="margin-top: 10px" v-if="preview.proExperiences.length !== 0"
                         v-for="pro in preview.proExperiences"
                >
                  <el-row class="title" type="flex">
                    {{ pro.project_name }}
                  </el-row>
                  <el-row class="info">
                    {{ pro.project_character }}
                    <el-divider direction="vertical"></el-divider>
                    {{ msToDate(pro.start_time).withoutTime }} - {{ msToDate(pro.end_time).withoutTime }}
                  </el-row>
                </el-card>
              </el-form-item>
            </el-row>

            <!-- 荣誉奖项 -->
            <el-row>
              <el-form-item label="荣誉奖项">
                <el-card shadow="never" style="margin-top: 10px" v-if="preview.honor_award !== '' && preview.honor_award !== null">
                  <el-row v-html="preview.honor_award"></el-row>
                </el-card>
              </el-form-item>
            </el-row>

            <!-- 兴趣爱好及个人优势 -->
            <el-row>
              <el-form-item label="兴趣爱好及个人优势">
                <el-card
                  shadow="never"
                  style="margin-top: 10px;white-space: pre-wrap;"
                  v-if="preview.hobby !== '' && preview.hobby !== null"
                >
                  {{ preview.hobby }}
                </el-card>
              </el-form-item>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { msToDate } from '@/utils/format'
import { mapGetters } from 'vuex'

export default {
  name: 'Platforms',
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      conditions: {
        username: '',
        create_time: [],
        into_work_time: [],
        sex: '',
        size: 10,
        currentPage: 1
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      previewDialogVisible: false,
      previewDialogLoading: false,
      preview: {
        eduExperiences: [],
        praExperiences: [],
        proExperiences: []
      }
    }
  },
  mounted() {
    this.query()
  },
  computed: {
    ...mapGetters(['platforms', 'platforms_total'])
  },
  methods: {
    msToDate,
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    query() {
      this.loading = true
      this.$store.dispatch('resume/getAllUsersPlatformResume', this.conditions)
        .then((resp) => {
        })
        .catch((error) => {
          this.$message.error(error)
        }).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 1500)
      })
    },
    reset() {
      this.conditions = {
        username: '',
        create_time: [],
        into_work_time: [],
        sex: '',
        size: 10,
        currentPage: 1
      }
      this.query()
    },
    handleSizeChange(val) {
      this.conditions.size = val
      this.query()
    },
    handleCurrentChange(val) {
      this.conditions.currentPage = val
      this.query()
    },
    handleDeleteUserResume(id) {
      if (id instanceof PointerEvent) {
        this.deleteRequest(this.ids[0])
      } else {
        this.deleteRequest(id)
      }
    },
    deleteRequest(id) {
      this.$confirm(`确认删除该简历?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('resume/removeUserPlatformResumeInfo', id).then((resp) => {
          if (resp) {
            this.$message.success('简历删除成功')
          }
        }).catch((error) => {
          this.$message.error(error)
          this.handlePreviewDialogClose()
        }).finally(() => {
          this.query()
        })
      }).catch(() => {
      })
    },
    handlePlatformResumeDetails(id) {
      if (id instanceof PointerEvent) {
        this.previewRequest(this.ids[0])
      } else {
        this.previewRequest(id)
      }
    },
    previewRequest(id) {
      this.previewDialogVisible = true
      this.previewDialogLoading = true
      this.$store.dispatch('resume/getUserResumeInfoByResumeId', id)
        .then((resp) => {
          this.preview = resp
          this.preview.resume_avatar = this.server + this.preview.resume_avatar
        }).catch((error) => {
        this.$message.error(error)
      }).finally(() => {
        setTimeout(() => {
          this.previewDialogLoading = false
        }, 1500)
      })
    },
    openEditPlatformResumeDialog(id) {
      if (id instanceof PointerEvent) {

      } else {

      }
    },
    handlePreviewDialogClose() {
      this.previewDialogVisible = false
      this.previewDialogLoading = false
      this.preview = {}
    }
  }
}
</script>


<style scoped lang="scss">

.preview-card {
  border-radius: 12px;
}

.preview-card ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  font-size: 17px;
}

.title {
  font-weight: 600;
  font-size: 17px
}

.info {
  margin-top: 10px;
  font-size: 15px;
  color: #808080;
}

</style>
